<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">商城</text>
			</view>
		</view>
		
		<view class="shoppingmall">
			<!-- 左边内容 -->
			<view class="mall-left">
				<view class="gangqin" v-for="(item,index) in list" :key="index" @click="go(index)">
					<view class="liutiao" :style="{display:index==isselect?'block':'none'}">
						
					</view>
					<view class="gangqin-center" :style="{color:index==isselect?'#8DCE2A':'#aaaaaa'}">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 右边内容 -->
			<view class="mall-right">
				<view class="guojia">
					<view class="guo" v-for="(item,index) in guojia" :key="index" @click="xuan(index)">
						<text :style="{color:index==active?'#8DCE2A':'#aaaaaa'}">{{item.country}}</text>
					</view>
				</view>
				<view class="guoyue">
					<view class="guoyueqi">
						<image src="../../../../static/teacherimg/qin1.png" mode="" class="qintu"></image>
						<view class="qinname">
							雅马哈钢琴YUS3-
							专业
						</view>
						<view class="qinjia">
							<text>¥ 13948</text>
							<text>316人付款</text>
						</view>
					</view>
					<view class="guoyueqi">
						<image src="../../../../static/teacherimg/qin1.png" mode="" class="qintu"></image>
						<view class="qinname">
							雅马哈钢琴YUS3-
							专业
						</view>
						<view class="qinjia">
							<text>¥ 13948</text>
							<text>316人付款</text>
						</view>
					</view>
					<view class="guoyueqi">
						<image src="../../../../static/teacherimg/qin1.png" mode="" class="qintu"></image>
						<view class="qinname">
							雅马哈钢琴YUS3-
							专业
						</view>
						<view class="qinjia">
							<text>¥ 13948</text>
							<text>316人付款</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:"钢琴"},
					{name:"古筝"},
					{name:"吉他"},
					{name:"扬琴"},
					{name:"二胡"},
					{name:"小提琴"},
					{name:"架子鼓"},
					{name:"尤克里里"},
				],
				isselect:0,
				guojia:[
					{country:"国产"},
					{country:"日本"},
					{country:"韩国"},
					{country:"欧美"},
				],
				active:0,
			}
		},
		methods: {
			go(index){
				this.isselect=index
				console.log(this.isselect)
			},
			xuan(index){
				this.active=index
				// if(this.active==index){
				// 	$('.guo>text').css('font-size','32rpx')
				// }
			},
		}
	}
</script>

<style>
.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	.shoppingmall{
		width: 100%;
		height: 100%;
		margin-top: 44rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.mall-left{
		width: 220rpx;
		height: 1173rpx;
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		background: #FFFFFF;
		box-shadow: 0px 5px 40px 0px rgba(192, 192, 192, 0.33);
	}
	.gangqin{
		width: 100%;
		height: 110rpx;
		position: relative;
		border-bottom:0.5rpx solid #AAAAAA;
		text-align: center;
		line-height: 110rpx;
		color: #777777;
		font-size: 32rpx;
		font-weight: bold;
	}
	.gangqin-center{
		width: 100%;
		height: 100%;
	}
	.liutiao{
		width: 9rpx;
		height: 40rpx;
		position: absolute;
		background: #8DCE2A;
		border-radius: 4.5rpx;
		top: 50%;
		margin-top: -20rpx;
		left: 0rpx;
	}
	
	
	.mall-right{
		width: 476rpx;
		height: 100%;
		margin-right: 29rpx;
		/* margin-top: 40rpx; */
		display: block;
	}
	
	.guojia{
		width: 100%;
		height: 32rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.guo{
		font-size: 24rpx;
		color: #AAAAAA;
	}
	
	.guoyue{
		width: 100%;
		height: auto;
		overflow: scroll;
		margin-top: 42rpx;
		display: flex;
		justify-content: space-between;
		flex-flow:row wrap;
	}
	.guoyueqi{
		width: 224rpx;
		height: 315rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.qintu{
		width: 224rpx;
		height: 181rpx;
		border-radius: 5rpx;
	}
	.qinname{
		width: 100%;
		height: 54rpx;
		color: #777777;
		font-size:24rpx;
	}
	.qinjia{
		width: 100%;
		height: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.qinjia>text{
		font-size: 24rpx;
		line-height: 24rpx;
	}
	.qinjia>text:first-child{
		color: #EA3131;
	}
	.qinjia>text:nth-child(2){
		color: #AAAAAA;
	}
</style>
